<template>

    <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        router
      >
<!--        循环遍历-->
        <el-sub-menu :index="item.path" v-for="item in menus" :key="item.path">
          <template #title>
            <el-icon><component :is="item.icon" /></el-icon>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item-group v-if="item.children">
            <el-menu-item :index="item2.path" v-for="item2 in item.children" :key="item2.path">{{item2.title}}</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        
      </el-menu>

</template>
<script setup>
  import {useCounterStore} from "@/stores/counter.js";
  import {getMenuByUserType} from "@/menus.js";
  import {computed} from "vue";

  const  counter = useCounterStore()
  const menus = computed(
      ()=>{
        return getMenuByUserType(counter.vo_user.value.usetype)
      }
  )
  console.log(menus.value)
</script>